前篇提到可以利用 waitForElementVisible() 去等待一個物件的 display 變成 none 或 hidden。

<div id="status" style="display: none;">
    <div class="text">載入中</div>
</div>

測試：

this.waitForElementNotPresent('#status', 60000);

// Element <#status> was not present after 4004 milliseconds.

不過如果測試環境使用的是 Safari:

Error while running .isElementDisplayed() protocol action: The command 'GET /session/ID/element/ID/displayed' was not found.

這是因為 Safari 的 WebDriver 並沒有 displayed 這個 endpoint。

解法

1. 直接修改前端
   移除透過修改 display 的部分，直接把 element 移除比較簡單XD

2. 撰寫客製化指令
   利用 getCssProperty() 更新該 element 的 display

module.exports = {
  command: async function() {
    let currentStatus = '';
    while (currentStatus !== 'none')
      this.getCssProperty('#status', 'display', result => {
        currentStatus = result.value;
        this.pause(500);
      });
  },
};